<template>
  <div>
    <div class="common-page__head">
      <!-- <comp-paths class="route" :paths="['/stats', $route.fullPath]"></comp-paths> -->
      <div class="title">
        <el-button type="plain" size="small" icon="el-icon-top" @click="preStep" v-if="tagId">返回上一级</el-button>
      </div>
      <h3 v-if="tagId">{{ shiName }}</h3>
    </div>
    <div class="common-page__body page-stats-order-tag__body" v-if="!open">
      <div class="row">
        <div class="col col--2em" style="font-size: 26px;">序号</div>
        <div class="col" style="font-size: 26px;">事项分类</div>
        <div class="col" style="font-size: 26px;">事项总数</div>
        <div class="col" style="font-size: 26px;">办结数</div>
        <div class="col" style="font-size: 26px;">办结率</div>
        <div class="col" style="font-size: 26px;">办成数</div>
        <div class="col" style="font-size: 26px;">办成率</div>
      </div>
      <div class="parent common-page__body page-stats-order-tag__body"
           style="height:auto;display:block;overflow: initial"
           v-for="(tag, index) in tagList" :key="tag.id">
        <div class="row" >
          <div class="col col--2em" style="font-size: 26px;">{{ index + 1 }}</div>
          <div class="col" @click="setxian(tag.id,tag.name,tag)"
               style="cursor: pointer;font-size: 26px;text-decoration:underline;">{{ tag.name }}
          </div>
          <div class="col" style="font-size: 26px;">{{ tag.stats.ordersTotal }}</div>
          <div class="col" @click="setban(tag.id,5,tag.name)"
               style="cursor: pointer;font-size: 26px;text-decoration:underline; ">{{ tag.stats.ordersFinishedTotal }}
          </div>
          <div class="col" style="font-size: 26px;">{{ tag.stats.ordersFinishedPercent }}%</div>


          <div class="col" style="font-size: 26px;">{{ tag.stats.countCom }}</div>
          <div class="col" style="font-size: 26px;">{{ tag.stats.countComPercent }}%</div>

        </div>
        <div class="row" v-for="(tag2, index2) in tag.children" :key="tag2.id" v-if="tag.childrenShow &&  isCanshowChild(tag)">
          <div class="col col--2em" style="font-size: 26px;text-align: right;color:yellow;">{{ index2 + 1 }}</div>
          <div class="col" @click="setxian(tag2.id,tag2.name,tag2)"
               style="cursor: pointer;font-size: 26px;text-decoration:underline;">{{ tag2.name }}
          </div>
          <div class="col" style="font-size: 26px;">{{ tag2.stats.ordersTotal }}</div>
          <div class="col" @click="setban(tag2.id,5,tag2.name)"
               style="cursor: pointer;font-size: 26px;text-decoration:underline; ">{{ tag2.stats.ordersFinishedTotal }}
          </div>
          <div class="col" style="font-size: 26px;">{{ tag2.stats.ordersFinishedPercent }}%</div>

          <div class="col" style="font-size: 26px;">{{ tag2.stats.countCom }}</div>
          <div class="col" style="font-size: 26px;">{{ tag2.stats.countComPercent }}%</div>
        </div>
      </div>


<!--      <el-table-->
<!--        :data="tagList"-->
<!--        style="width: 100%;margin-bottom: 20px;"-->
<!--        row-key="id"-->
<!--        border-->
<!--        default-expand-all-->
<!--        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">-->
<!--        <el-table-column-->
<!--          prop="name"-->
<!--          label="事项分类"-->
<!--          sortable-->
<!--          width="180">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="ordersTotal"-->
<!--          label="事项总数"-->
<!--          sortable-->
<!--          width="180">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="ordersFinishedTotal"-->
<!--          label="办结数">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="ordersFinishedPercent"-->
<!--          label="办结率">-->
<!--        </el-table-column>-->
<!--      </el-table>-->
      <div class="row">
        <div class="col col--2em" style="font-size: 26px;"></div>
        <div style="font-size: 26px;" class="col">合计</div>
        <div style="font-size: 26px;" class="col">{{ sum }}</div>
        <div style="font-size: 26px;" class="col">{{ banji }}</div>
        <div style="font-size: 26px;" class="col">{{ bajielv }}%</div>

        <div style="font-size: 26px;" class="col">{{ banche }}</div>
        <div style="font-size: 26px;" class="col">{{ bachelv }}%</div>

      </div>
    </div>
    <div class="pagecoun" v-if="open">
      <div class="TableLis" v-loading.fullscreen="loading">
        <div class="tabloading" v-if="oopenfa">正在加载...</div>
        <div v-else>
          <el-table class="tali" border :data="countryList" style="width: 100%;font-size: 20px" :header-cell-style="{
                        background:'#0C1E5E',color:'#fff'}"
                    @row-click="handleClick"
          >
            <el-table-column type="index" label="序号" width="60"/>
            <!-- <el-table-column prop="id" label="id" v-if="openId" width="auto" min-width="120" /> -->
            <el-table-column prop="corpName" label="企业/项目信息" width="auto" min-width="160"/>
            <el-table-column prop="title" label="事项标题" width="auto" min-width="160"/>
            <el-table-column prop="tagName" label="事项分类" width="auto" min-width="120"/>
            <el-table-column prop="fwzy" label="服务专员" width="auto" min-width="120"/>
            <el-table-column prop="level" label="事项层面" width="auto" min-width="60"/>
            <el-table-column prop="status" label="事项状态" width="auto" min-width="60"/>
            <el-table-column prop="evaluationFlag" label="评价状态" width="auto" min-width="60"/>
            <el-table-column prop="userName" label="提交人" width="auto" min-width="120"/>
            <el-table-column prop="createdAt" label="提交时间" width="auto" min-width="120"/>
          </el-table>

        </div>

      </div>

    </div>
    <div class="paginationd" v-if="open">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10,20,30]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :key="key">
      </el-pagination>
    </div>
  </div>
</template>
<script>

import user from "../../plugins/user"
import {string, int} from "../../util";
import treeData from '@/plugins/treeData'
export default {
  name: "two",
  emits:['openOrder'],
  props: {
    year:{
      type: String,
      default: null
    },
    tagIdProp:{
      type: String,
      default: null
    }
  },
  data: () => ({
    loading: false,
    open: false,
    countryList: [],
    tagList: [],
    pageNum: 1,
    pagesize: 10,
    total: 0,
    tagId: null,
    status: null,
    key: 0,
    oopenfa: true,
    shiName: null,
    showProp: true

  }),
  watch:{
    tagIdProp(newValue, oldValue) {
      console.log('tag变化')
      this.init(true)
    }
  },
  computed: {
    sum() {
      let sum = 0
      for (let index = 0; index < this.tagList.length; index++) {
        const element = this.tagList[index];
        console.log();
        sum += element.stats.ordersTotal

      }
      return sum
    },
    banji() {
      let sum = 0
      for (let index = 0; index < this.tagList.length; index++) {
        const element = this.tagList[index];
        sum += element.stats.ordersFinishedTotal

      }
      return sum
    },
    bajielv() {
      let sum = 0;
      let ban = 0;
      for (let index = 0; index < this.tagList.length; index++) {
        const element = this.tagList[index];
        console.log();
        sum += element.stats.ordersTotal;
        ban += element.stats.ordersFinishedTotal


      }
      return int(int(ban) / int(sum), 4) / 100
    },
    banche() {
      let sum = 0
      for (let index = 0; index < this.tagList.length; index++) {
        const element = this.tagList[index];
        sum += element.stats.countCom

      }
      return sum
    },
    bachelv() {
      let sum = 0;
      let ban = 0;
      for (let index = 0; index < this.tagList.length; index++) {
        const element = this.tagList[index];
        console.log();
        sum += element.stats.ordersTotal;
        ban += element.stats.countCom


      }
      return int(int(ban) / int(sum), 4) / 100
    }

  },
  methods: {
    search(clean) {
      if (this.loading) return;
      if (clean) this.tagList = [];
      this.loading = true;
      user.getStatsOrderTagnum({
        startTime:this.year?new Date(this.year,0,1).getTime():null,
        endTime: this.year?new Date(this.year+'-12-31 23:59:59').getTime():null
      }).then((res) => {
        this.loading = false;
        if (res.code === 0) {
          this.tagList = res.data.map((data) => ({
            id: string(data.tagId),
            parentId:string(data.parentId),
            name: string(data.tagName),
            stats: {
              ordersTotal: int(data.allCount),
              ordersFinishedTotal: int(data.countStatus_5),
              ordersFinishedPercent: int(int(data.countStatus_5) / int(data.allCount), 4) / 100,
              countCom: int(data.countCom),
              countComPercent: int(int(data.countCom) / int(data.allCount), 4) / 100,
            },
            ordersTotal: int(data.allCount),
            ordersFinishedTotal: int(data.countStatus_5),
            ordersFinishedPercent: int(int(data.countStatus_5) / int(data.allCount), 4) / 100,
            allCount:data.allCount
          }));
          // this.tagList.sort((a, b) => {
          //   let a1 = a.stats.ordersFinishedPercent;
          //   let a2 = a.stats.ordersFinishedTotal;
          //   let a3 = a.stats.ordersTotal;
          //   let b1 = b.stats.ordersFinishedPercent;
          //   let b2 = b.stats.ordersFinishedTotal;
          //   let b3 = b.stats.ordersTotal;
          //   return a1 === b1 ? a2 === b2 ? b3 - a3 : b2 - a2 : b1 - a1;
          // })

          this.tagList = this.tagList.sort((a,b)=>a.allCount>b.allCount?-1:1).map(x=>{
            return {
              ...x,
              name:x.name=='融资服务'?x.name:x.name.replace('服务','')
            }
          });// 根据总数来排序
          this.tagList = treeData.arrayToTree(this.tagList,'id','parentId','').map(x=>{
            return {
              ...x,
              childrenShow:false
            }
          })
          console.log('this.tagList',this.tagList)

          if(this.tagIdProp && this.showProp){
            this.setxian(this.tagIdProp,null,this.tagList.find(x=>x.id == this.tagIdProp))
          }
        } else {
          // modal.toast("加载失败<br>" + res.code + "：" + res.msg, "error");
        }
      });
    },
    formatDate(value) {
      let date = new Date(value);//这个是纳秒的，想要毫秒的可以不用除以1000000
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return y + '年' + MM + '月' + d + '日 ' + h + ':' + m + ':' + s;
    },
    getsetxian(a) {
      this.countryList = []
      user.getcountryListnumtag({
        ...a,
        year:this.year
      }).then((res) => {
        this.total = res.data.numberOfElements;
        this.pageNum = a.pageNum

        res.data.list.forEach(element => {
          var str = '';
          element.workTagMappWorkTagMapList.forEach(item => {
            str += item.tagName + ","
          })
          let str1 = '';
          if (element.level) {
            if (element.level == "1") {
              str1 = "县级"
            }
            if (element.level == "2") {
              str1 = "市级"
            }
            if (element.level == "3") {
              str1 = "自治区级"
            }
          } else if (element.level === "") {
            if (element.deptIdDepartment.areaId) {
              str1 = "县级"
            } else if (element.deptIdDepartment.areaId == undefined) {
              str1 = "市级"

            } else if (element.deptIdDepartment.cityId == undefined) {
              str1 = "自治区级"

            }
          }
          let status = ''
          if (element.status == 1) {
            status = '待提交'
          } else if (element.status == 2) {
            status = '已提交'
          } else if (element.status == 3) {
            status = '已退回'
          } else if (element.status == 4) {
            status = ''
          } else if (element.status == 5) {
            status = '已办结'
          }
          let evaluationFlag = ""
          if (element.evaluationFlag == 1 && element.status == 5) {
            evaluationFlag = '待评价'
          } else if (element.evaluationFlag == 1) {
            evaluationFlag = '-'
          } else if (element.evaluationFlag == 2) {
            evaluationFlag = '已评价'

          }
          let userName = element.userIdUserAccount.userName + '/' + element.userIdUserAccount.userAccount;
          let createdAt = this.formatDate(Number(element.createdTime));
          let corptype = ''
          if (element.corpIdCorpDetail.corpType == "1") {
            corptype = "企业"
          } else if (element.corpIdCorpDetail.corpType == "2") {
            corptype = "项目"

          } else if (element.corpIdCorpDetail.corpType == "3") {
            corptype = "园区"

          }
          let corpName = element.corpIdCorpDetail.corpName + ' /' + corptype
          let obj = {
            corpName: corpName,
            title: element.title,
            tagName: str.slice(0, str.length - 1),
            fwzy: "",
            level: str1,
            completeContent: element.completeContent,
            status: status,
            evaluationFlag: evaluationFlag,
            userName: userName,
            createdAt: createdAt,
            orderId:element.orderId
          }

          this.countryList.push(obj)
        });
        if (this.countryList) {
          this.oopenfa = false
        }

      })
    },
    setxian(params, name,tag) {
      console.log('setxian',tag)
      if(tag?.children?.length>0 && this.isCanshowChild(tag)){

        tag.childrenShow = !tag.childrenShow
        // 其他的tag 隐藏二级分类
        this.tagList.filter(x=>x.id!=tag.id).forEach(x=>{
          x.childrenShow = false
        })
      }else{
        this.tagId = params;
        this.shiName = name
        let a = {
          tagId: params,
          pageNum: this.pageNum,
          pageSize: this.pagesize
        }
        this.open = true;
        this.getsetxian(a)
      }

    },
    setban(params, b, name) {
      this.shiName = name
      this.status = b
      this.tagId = params
      let a = {
        tagId: params,
        pageNum: this.pageNum,
        pageSize: this.pagesize,
        status: this.status
      }
      this.open = true;
      this.getsetxian(a)
    },
    handleSizeChange(val) {
      this.oopenfa = true

      this.countryList = [];
      this.total = 0
      let a
      if (this.status == 5) {
        this.pagesize = val;
        a = {
          tagId: this.tagId,
          pageNum: this.pageNum,
          pageSize: val,
          status: this.status
        }
      } else {
        this.pagesize = val;
        a = {
          tagId: this.tagId,
          pageNum: this.pageNum,
          pageSize: val
        }

      }
      this.getsetxian(a)

    },
    handleCurrentChange(val) {
      this.oopenfa = true
      this.total = 0
      this.countryList = [];
      this.pageNum = val;
      this.key = val;
      let a
      if (this.status == 5) {
        a = {
          tagId: this.tagId,
          pageNum: val,
          pageSize: this.pagesize,
          status: this.status
        }
      } else {
        a = {
          tagId: this.tagId,
          pageNum: val,
          pageSize: this.pagesize
        }

      }
      this.getsetxian(a)


    },
    init(e) {
      this.showProp = e || false
      this.open = false;
      this.tagId = null
      this.status = null;
      this.countryList = []
      if (this.loading) return;
      this.loading = false;
      this.search();
      this.oopenfa = true;

    },
    handleClick(e){
      console.log(2)
      this.$emit('openOrder',e.orderId)
    },
    /**
     * 是否可以显示二级分类
     * @param tag
     */
    isCanshowChild(tag) {
      console.log('isCanshowChild',this.year)
      if(
        (tag.id == '202216522600710314' && ['2024'].includes(this.year))
        || ['2025'].includes(this.year)
        || this.year == null
      ){
        return true
      }
      return false
    },
    /**
     * 返回上一级
     */
    preStep(){
      this.open = false;
      this.tagId = null
      this.status = null;
      this.countryList = []
      if (this.loading) return;
      this.loading = false;
      this.oopenfa = true;
    }
  },
  mounted() {
    this.search();
  }
}
</script>
<style lang="scss" scoped>
@import '../../common/common.css';

.common-page__head {
  margin: 0;
}

.common-page__body {
  max-height: 65vh;
  //  width: 40vw;
  overflow-y: auto;

  .parent{
    .row {
      width: 100%;
      // background: red;
      color: white;

      .col {
        background-color: rgba(0, 24, 106, 0.5);
        color: white;

      }
    }
  }
  .row {
    width: 100%;
    // background: red;
    color: white;

    .col {
      background-color: rgba(0, 24, 106, 0.5);
      color: white;

    }
  }

}

.pagecoun {
  height: 56vh;
  overflow-y: auto;

  .TableLis {
    .tabloading {
      position: relative;
      left: 45%;
      width: 200px;
      height: 200px;
      font-size: 20px;
      line-height: 200px;
      color: white;
      text-align: center;
    }

    .tali ::v-deep .el-table__row {
      background-color: #0C1E5E;

      color: white;
    }

    .tali ::v-deep tr:hover > td {
      background-color: #1808c3;
    }
  }
}


h3 {
  text-align: center;
  font-size: 36px;
  color: #fff;
}

</style>
